<template>
  <div>
    <div style="position: relative;">
       <span style="position: absolute;right:0;z-index:9999999">
      <el-button type="primary" :disabled="!!!currentRow.id" @click="openCard('1')">办理融合</el-button>
      <el-button type="primary" :disabled="!!!currentRow.id" @click="openCard('2')">办理开卡</el-button>
      <el-button :disabled="!!!currentRow.id"
                 @click="()=>$router.push({ path: '/MaintenanceManager', query: { packageId: currentRow.telecomPackageId||currentRow.aaaaTelecomPackageId }})">套餐明细</el-button>
      <el-button plain icon="el-icon-refresh" @click="doQuery" class="icon-refresh" size="medium"></el-button>
    </span>
      <el-tabs v-model="activeName" @tab-click="handleClick" style="line-height: 40px;height: 40px;">
        <el-tab-pane label="全部" name="first" code=""></el-tab-pane>
        <el-tab-pane label="电信" name="second" code="01"></el-tab-pane>
        <el-tab-pane label="联通" name="fourth" code="02"></el-tab-pane>
        <el-tab-pane label="移动" name="third" code="03"></el-tab-pane>
      </el-tabs>
    </div>

    <el-container class="ring_container">
      <el-aside width="200px">
        <div style="margin:20px">卡号类型</div>
        <div>
          <el-menu style="font-size: 12px;">
            <el-menu-item v-for="(i,x) in aaaaNoTypeList" :key="i.id" :index="i.id"
                          @click="()=>{queryParam.aaaaNoTypeId=i.id;doQuery()}"
                          style="height: 40px;line-height: 40px;margin-bottom: 10px">
              <span slot="title">{{ i.aaaaNoTypeName }}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-main style="position: relative;">
        <el-row :gutter="12">
          <el-col ref="col" style="margin-bottom: 10px;position: relative" :span="8" v-for="(i,x) in tableData" :key="i.id">
            <el-tooltip effect="dark" placement="bottom">
              <div :style="`width: ${tooltipWidth}px;`" slot="content">最低预存：{{ i.minPreStorm }}<br/>合约期：{{ i.contractPeriod }}<br/>选号费：{{ i.cardOpeningFee }}</div>
              <el-card shadow="hover" @click.native="cardClick(x,i)" :ref="`card${x}`" style="cursor: pointer;">
                <div style="font-size: 22px; color: #333; font-weight: bolder">
                  <p style="width: 100%;display: flex;" v-if="i.operator==='03'">
                    <span class="iconfont icon-yidong" style="color: #7eb95e;font-size:30px;margin-right: 20px"></span>&nbsp;&nbsp;
                    {{ getOperatorName(i.operator) + i.cardNo }}
                  </p>
                  <p style="width: 100%;display: flex;" v-if="i.operator==='02'">
                    <span class="iconfont icon-liantong"
                          style="color: #d62119;font-size:30px;margin-right: 20px"></span>&nbsp;&nbsp;
                    {{ getOperatorName(i.operator) + i.cardNo }}
                  </p>
                  <p style="width: 100%;display: flex;" v-if="i.operator==='01'">
                    <span class="iconfont icon-dianxin" style="color: #489af6;font-size:30px;margin-right: 20px"></span>&nbsp;&nbsp;
                    {{ getOperatorName(i.operator) + i.cardNo }}
                  </p>

                  <p style="display: block; width: 100%">
                    <el-tag style="line-height: 24px; height: 24px;margin: 10px 0 20px 50px;display: block;float: left">
                      {{ !!i.aaaaNoTypeName ? i.aaaaPackageName : i.packageName }}
                    </el-tag>
                  </p>
                </div>
              </el-card>
            </el-tooltip>
          </el-col>
        </el-row>
        <simple-pager class="ring_pagination" ref="pager" request-url="/noCard/getList" @success="noCardLoadSuccess"
                      :default-param="{noCardState:'NOT_OPENED'}" :tableData.sync="tableData"/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import request from "@/utils/Request";
import {operatorCode} from "@/common/PublicCode"
import SimplePager from "@/components/SimplePager";
import {getOperatorName} from "@/common/PublicCode";
import EventBus from '@/utils/EventBus'


export default {
  name: "CardOpenBusiness.vue",
  components: {SimplePager},
  data() {
    return {
      getOperatorName: getOperatorName,
      tableData: [],
      operatorCode: operatorCode,
      activeName: 'first',
      aaaaNoTypeList: [],
      currentPackage: {},
      currentOperator: '',
      queryParam: {},
      currentRow: {},
      tooltipWidth: 100
    };
  },
  mounted() {
    this.initAAAANoTypeList();
    EventBus.$off('saveOrderSuccess');
    EventBus.$on('saveOrderSuccess', () => {
      this.doQuery();
    });
  },
  methods: {
    noCardLoadSuccess(_rows) {
      if (_rows.length > 0) {
        this.$nextTick(()=>{
          this.tooltipWidth = this.$refs.col[0].$children[0].$el.clientWidth-55;
        });
      }
    },
    openCard(type) {
      request.get('/openCardOrder/checkNoCardState', {params: {id: this.currentRow.id}}).then(({data}) => {
        if (data.success) {
          this.$router.push({path: '/CardOpen', query: {id: this.currentRow.id, type}});
        } else {
          this.$message({type: 'warning', message: data.message});
        }
      }).catch(err => {
        this.$message({type: 'error', message: "查询靓号列表失败"});
        console.log(err)
      })
    },
    doQuery() {
      this.clearSelect();
      this.$refs.pager.doQuery(this.queryParam);
    },
    cardClick(x, row) {
      for (let i = 0; i < this.tableData.length; i++) {
        this.$refs['card' + i][0].$el.style.background = ''
        this.$refs['card' + i][0].$el.style.borderColor = ''
      }
      this.$refs['card' + x][0].$el.style.background = '#EFF2FF'
      this.$refs['card' + x][0].$el.style.borderColor = '#5B73FF'
      this.currentRow = row;
    },
    clearSelect() {
      for (let i = 0; i < this.tableData.length; i++) {
        this.$refs['card' + i][0].$el.style.background = ''
      }
      this.currentRow = {};
    },
    initAAAANoTypeList() {
      request.get('/AAAANoType/getList', {params: {operator: this.queryParam.operator}}).then(({data}) => {
        if (data.success) {
          this.aaaaNoTypeList = data.data;
          this.aaaaNoTypeList.unshift({aaaaNoTypeName: '普通卡号', id: '-1'});
          this.aaaaNoTypeList.unshift({aaaaNoTypeName: '全部', id: null});
        } else {
          throw new Error();
        }
      }).catch(err => {
        this.$message({type: 'error', message: "查询靓号列表失败"});
        console.log(err)
      })
    },
    handleClick(tab, event) {
      this.currentRow = {};
      this.queryParam.operator = tab.$attrs.code;
      this.initAAAANoTypeList();
      this.doQuery();
    },
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;

&
:last-child {
  margin-bottom: 0;
}

}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  /*line-height: 60px;*/
}

.el-aside {
  background: none;
  color: #333;
  border-right: 1px solid #EBEEF3;
}

.el-main {
  background: none;
  color: #333;
  text-align: center;
}

.ring_container {
  width: 100%;
  height: 500px;
  background: #fff;
  margin-top: 20px;
  border-radius: 3px;

}

.icon-refresh {
  min-width: 30px;
}

.icon-refresh:hover {
  background: #e6edff;
  border-color: #dce7ff;
}

.ring_pagination {
  position: absolute;
  bottom: 0;
  width: -webkit-calc(100% - 40px);
  width: -moz-calc(100% - 40px);
  width: calc(100% - 40px);
}

</style>